<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻展示平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #ffffff, #e6f0ff);
            min-height: 100vh;
            padding: 2rem 1rem;
            transition: background 1.5s ease;
        }
        
        .news-container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0,0,0,0.08);
            overflow: hidden;
            position: relative;
        }
        
        .back-button {
            position: fixed;
            top: 20px;
            left: 20px;
            padding: 8px 16px;
            background: rgba(52, 152, 219, 0.1);
            border: 1px solid rgba(52, 152, 219, 0.3);
            border-radius: 20px;
            color: #3498db;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1000;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
        
        .back-button:hover {
            background: rgba(52, 152, 219, 0.2);
            transform: translateX(-3px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
        }
        
        .news-header {
            padding: 3rem 3rem 1.5rem;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(245,249,255,0.95));
            position: relative;
            z-index: 10;
        }
        
        .news-title {
            font-size: 2.2rem;
            color: #1a1a1a;
            margin-bottom: 1.5rem;
            line-height: 1.3;
            position: relative;
            padding-top: 10px;
        }
        
        .news-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #3498db, #8e44ad);
            border-radius: 2px;
        }
        
        .news-meta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            color: #666;
            font-size: 0.95rem;
        }
        
        .author-effect {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            position: relative;
        }
        
        .effect-normal {
            opacity: 1;
        }
        
        .effect-premium {
            opacity: 0;
            transform: translateX(-20px);
            animation: slideIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
                       colorPulse 3s infinite alternate;
        }
        
        @keyframes slideIn {
            to { transform: translateX(0); opacity: 1; }
        }
        
        @keyframes colorPulse {
            0% { 
                color: #2c3e50; 
                text-shadow: 0 0 0 rgba(52, 152, 219, 0); 
            }
            50% { 
                color: #3498db; 
                text-shadow: 0 0 8px rgba(52, 152, 219, 0.4),
                             0 0 15px rgba(52, 152, 219, 0.3); 
            }
            100% { 
                color: #8e44ad; 
                text-shadow: 0 0 0 rgba(142, 68, 173, 0); 
            }
        }
        
        .news-content {
            padding: 2rem 3rem;
            line-height: 1.8;
            color: #333;
            font-size: 1.05rem;
            background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(250,252,255,0.92));
        }
        
        .news-content p {
            margin-bottom: 1.5rem;
            text-indent: 2em;
        }
        
        .section-title {
            font-size: 1.5rem;
            margin: 2rem 0 1rem;
            padding-bottom: 0.5rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, #3498db, #8e44ad);
        }
        
        .media-wrapper {
            margin: 2rem 0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            position: relative;
            background: linear-gradient(135deg, rgba(240, 248, 255, 0.6), rgba(245, 249, 255, 0.7));
        }
        
        .media-wrapper.premium {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .media-wrapper.premium:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .news-image {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .news-video, .news-audio {
            width: 100%;
            height: auto;
            background: #f8f9fa;
        }
        
        .media-caption {
            text-align: center;
            color: #666;
            font-size: 0.9rem;
            margin-top: 0.5rem;
            padding: 0.5rem;
        }
        
        blockquote {
            margin: 1.5rem 0;
            padding: 1.5rem 2rem;
            background: linear-gradient(to right, rgba(240, 249, 255, 0.6), rgba(248, 240, 255, 0.5));
            border-left: 4px solid #3498db;
            border-radius: 0 8px 8px 0;
            position: relative;
            font-style: italic;
        }
        
        blockquote::before {
            content: '"';
            position: absolute;
            top: -20px;
            left: 10px;
            font-size: 4rem;
            color: rgba(52, 152, 219, 0.2);
            font-family: Georgia, serif;
        }
        
        @media (max-width: 768px) {
            .news-header { padding: 1.5rem; }
            .news-title { font-size: 1.8rem; }
            .news-content { padding: 1.5rem; }
            .news-meta { flex-direction: column; align-items: flex-start; }
            .back-button {
                top: 10px;
                left: 10px;
                padding: 6px 12px;
                font-size: 0.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="news-container">
        <!-- 返回按钮 -->
        <button class="back-button" onclick="history.back()">← 返回</button>
        
        <header class="news-header">
            <h1 class="news-title">我校八年级顺利度过体考</h1>
            
            <div class="news-meta">
                <div class="author-info">
                    作者：<span class="author-effect effect-premium" data-effect="2">付轩宁</span>
                </div>
                <div class="publish-time">
                    发布时间：<time>2025.9.15</time>
                </div>
            </div>
        </header>

        <article class="news-content">
            <p>五中新华文学社2025年9月12日3时电。2025年9月8日上午，我校八年级考生66人乘坐大巴车前往镇赉三中考点准备参加体考经过上午的时间顺利完成所有体考项目。
我校经过长时间高强度训练的学生充满激情的站在考试场地上，每个学生都在场地上热身准备迎接考试，到九时考试开始，首先是跳强选项选项，男生们都用尽力气地挥舞着绳子，接着是坐位体前屈选项，每一个人都高兴地做出自己满意的成果，接着最重要的就是跑步项目了！有的同学一开始就冲在前面，保持着稳定的速度；有的同学则后程发力。每个人的脸上都已经汗流浃背了，呼吸都变得急促，但没有人放弃，都拼全力地坚持了下来。</p>
            

        </article>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const authorElements = document.querySelectorAll('.author-effect');
            const mediaElements = document.querySelectorAll('.media-wrapper');
            
            authorElements.forEach(el => {
                const effectType = el.dataset.effect || '1';
                
                if(effectType === '2') {
                    el.classList.add('effect-premium');
                } else {
                    el.classList.add('effect-normal');
                }
            });
            
            mediaElements.forEach(el => {
                const effectType = el.classList.contains('premium') ? '2' : '1';
                
                if(effectType === '1') {
                    el.classList.remove('premium');
                }
            });
        });
    </script>
</body>
</html>

<!-- 
    ============================
    多媒体嵌入示例（取消注释即可使用）
    ============================

    <!-- 图片嵌入示例 -->
    <!--
    <div class="media-wrapper premium">
        <img src="图片地址.jpg" alt="图片描述" class="news-image">
        <p class="media-caption">图片说明文字</p>
    </div>
    -->

    <!-- 视频嵌入示例 -->
    <!--
    <div class="media-wrapper premium">
        <video controls class="news-video" poster="视频封面图地址.jpg">
            <source src="视频地址.mp4" type="video/mp4">
            您的浏览器不支持视频播放
        </video>
        <p class="media-caption">视频说明文字</p>
    </div>
    -->

    <!-- 音频嵌入示例 -->
    <!--
    <div class="media-wrapper premium">
        <audio controls class="news-audio">
            <source src="音频地址.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>
        <p class="media-caption">音频说明文字</p>
    </div>
  </blockquote>框内内容 </blockquote>
    
     剩下参考其他 -->

